import 'package:f200/common/index.dart';
import 'package:f200/models/goods/goods_model.dart';
import 'package:f200/pages/goods/detail/controllers/goods_detail_controller.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class GoodsDetailView extends GetView<GoodsDetailController> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text('${controller.goodsInfo.title}'),
          automaticallyImplyLeading: true,
          elevation: 0,
          backgroundColor: Theme.of(context).appBarTheme.backgroundColor,
        ),
        body: Stack(
          children: [
            //页面内容
            Column(
              children: [
                Expanded(
                  child: SingleChildScrollView(
                    controller: controller.mainScrollCtr,
                    child: Container(
                      color: Colors.grey[100],
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          //大图
                          ADSwiperWidget(
                            height: 350,
                            images: controller.mainImages,
                          ),
                          //构建商品基本信息区块
                          _buildGoodsBaseInfo(controller.goodsInfo),
                          Divider(height: 2),
                          //构建售后服务区块
                          _buildGoodsServiceInfo(),
                          Divider(height: 2),
                          //构建优惠活动区块
                          _buildHuoDong(),
                          Divider(height: 2),
                          //构建用户评价
                          _buildUserEvaluate(controller.goodsInfo),
                          SizedBox(height: 2),
                          //构建商品详情
                          _buildGoodsDetailInfo(),
                          SizedBox(height: 60),
                        ],
                      ),
                    ),
                  ),
                ),
                _buildBottomRow(),
              ],
            ),
            //浮动按钮-分享
            _buildShareButton(),
            //浮动按钮-回到顶部
            _buildBackTopButton(),
          ],
        ),
      ),
    );
  }

  ///构建商品详情
  Widget _buildGoodsDetailInfo() {
    return Container(
      padding: EdgeInsets.all(8),
      color: Colors.white70,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('商品详情',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
          Divider(height: 1),
          //参数行
          Row(
            children: [
              SizedBox(
                width: 80,
                height: 34,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text('版型',
                      style: TextStyle(color: Colors.grey[600]),
                      textAlign: TextAlign.left),
                ),
              ),
              Text('合体型', style: TextStyle(color: Colors.grey[600])),
            ],
          ),
          Divider(height: 1),
          //参数行
          Row(
            children: [
              SizedBox(
                width: 80,
                height: 34,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text('适用季节',
                      style: TextStyle(color: Colors.grey[600]),
                      textAlign: TextAlign.left),
                ),
              ),
              Text('冬、春秋、春、秋、四季', style: TextStyle(color: Colors.grey[600])),
            ],
          ),
          Divider(height: 1),
          //参数行
          Row(
            children: [
              SizedBox(
                width: 80,
                height: 34,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text('尺码',
                      style: TextStyle(color: Colors.grey[600]),
                      textAlign: TextAlign.left),
                ),
              ),
              Text('XL、L、M、S', style: TextStyle(color: Colors.grey[600])),
            ],
          ),
          SizedBox(height: 18),
          //图片
          Image.asset('assets/images/goods_detail1.jpg'),
          SizedBox(height: 8),
          Image.asset('assets/images/goods_detail2.jpg'),
          SizedBox(height: 8),
          Image.asset('assets/images/goods_detail3.jpg'),
          SizedBox(height: 8),
          Image.asset('assets/images/goods_detail4.jpg'),
        ],
      ),
    );
  }

  ///构建用户评价
  Widget _buildUserEvaluate(GoodsModel goods) {
    return Card(
      elevation: 0,
      margin: EdgeInsets.symmetric(vertical: 4),
      child: Column(
        children: [
          Container(
            padding: EdgeInsets.symmetric(horizontal: 8, vertical: 8),
            child: Row(
              children: [
                Expanded(
                  child: Text('用户评价(${goods.evaluate})',
                      style: TextStyle(color: Colors.grey[700])),
                ),
                Text('${goods.favourable}% 好评',
                    style: TextStyle(color: Colors.grey[700])),
                Icon(Icons.keyboard_arrow_right, color: Colors.grey[500])
              ],
            ),
          ),
          Divider(height: 1, color: Colors.grey[300]),
          Container(
            padding: EdgeInsets.all(8),
            child: Column(
              children: [
                //用户名，头像
                Row(
                  children: [
                    SizedBox(
                      height: 40,
                      width: 40,
                      child: CircleAvatar(
                        backgroundColor: Color(0xFFe3e9df),
                        child: Icon(Icons.face_2_outlined, size: 30),
                        radius: 30,
                      ),
                    ),
                    SizedBox(width: 4),
                    Text('k***s', style: TextStyle(color: Colors.grey[700])),
                  ],
                ),
                SizedBox(height: 8),
                //日期时间，规格
                Row(
                  children: [
                    Text('2023-09-30 14:02',
                        style:
                            TextStyle(fontSize: 12, color: Colors.grey[700])),
                    SizedBox(width: 4),
                    Text('白茶色+松绿色;XL',
                        style:
                            TextStyle(fontSize: 12, color: Colors.grey[700])),
                  ],
                ),
                SizedBox(height: 8),
                //评价内容
                Text(
                  '面料纯棉，颜色很正，白色和绿色都很好看。面料纯棉，颜色很正，白色和绿色都很好看。面料纯棉，颜色很正，白色和绿色都很好看。',
                  style: TextStyle(fontSize: 14, color: Colors.grey[700]),
                ),
                SizedBox(height: 8),
                //图片，视频
                SizedBox(
                  width: double.infinity,
                  child: Wrap(
                    spacing: 16,
                    runSpacing: 4,
                    children: [
                      SizedBox(
                        width: 70,
                        height: 70,
                        child: Image.asset(
                          'assets/images/goods_evaluate1.jpg',
                          fit: BoxFit.cover,
                        ),
                      ),
                      // SizedBox(width: 8),
                      SizedBox(
                        width: 70,
                        height: 70,
                        child: Image.asset(
                          'assets/images/黄家驹.png',
                          fit: BoxFit.cover,
                        ),
                      ),
                      // SizedBox(width: 8),
                      SizedBox(
                        width: 70,
                        height: 70,
                        child: Image.asset(
                          'assets/images/夏装不只5折.png',
                          fit: BoxFit.cover,
                        ),
                      ),
                      // SizedBox(width: 8),
                      SizedBox(
                        width: 70,
                        height: 70,
                        child: Image.asset(
                          'assets/images/goods_evaluate1.jpg',
                          fit: BoxFit.cover,
                        ),
                      ),
                      // SizedBox(width: 8),
                      SizedBox(
                        width: 70,
                        height: 70,
                        child: Image.asset(
                          'assets/images/goods_evaluate1.jpg',
                          fit: BoxFit.cover,
                        ),
                      ),
                    ],
                  ),
                ),
                SizedBox(height: 8),
              ],
            ),
          ),
        ],
      ),
    );
  }

  ///构建优惠活动区块
  Widget _buildHuoDong() {
    return Container(
      padding: const EdgeInsets.all(4.0),
      color: Colors.white70,
      child: Row(
        children: [
          SizedBox(
            height: 32,
            width: 60,
            child: Center(
                child: Text('活动',
                    style: TextStyle(fontSize: 12, color: Colors.grey[700]))),
          ),
          DefaultTextStyle(
            style: TextStyle(fontSize: 12, color: Colors.grey[700]),
            child: Expanded(
              child: Column(
                children: [
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Transform(
                        transform: Matrix4.identity()..scale(0.98, 0.87),
                        child: SizedBox(
                          width: 66,
                          height: 32,
                          child: Chip(
                            label: Text('赠送积分',
                                style:
                                    TextStyle(fontSize: 12, letterSpacing: 1)),
                            padding: EdgeInsets.symmetric(
                                horizontal: 2, vertical: 0),
                            labelPadding: EdgeInsets.symmetric(
                                horizontal: 2, vertical: 0),
                            backgroundColor: Colors.red,
                            deleteButtonTooltipMessage: '',
                            visualDensity: VisualDensity.compact,
                          ),
                        ),
                      ),
                      RichText(
                        text: TextSpan(
                          text: '下单付款可获得',
                          style:
                              TextStyle(fontSize: 12, color: Colors.grey[700]),
                          children: [
                            TextSpan(
                              style: TextStyle(color: Colors.red),
                              text: ' 2 ',
                            ),
                            TextSpan(
                              style: TextStyle(color: Colors.red),
                              text: '积分',
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }

  ///构建售后服务区块
  Widget _buildGoodsServiceInfo() {
    return Container(
      padding: const EdgeInsets.all(4.0),
      color: Colors.white70,
      child: Row(
        children: [
          SizedBox(
            height: 40,
            width: 60,
            child: Center(
                child: Text('服务',
                    style: TextStyle(fontSize: 12, color: Colors.grey[700]))),
          ),
          DefaultTextStyle(
            style: TextStyle(fontSize: 12, color: Colors.grey[700]),
            child: Expanded(
              child: Wrap(
                spacing: 8,
                runSpacing: 8,
                alignment: WrapAlignment.start,
                children: [
                  Text('无条件退货'),
                  Text('无条件退货'),
                  Text('无条件退货'),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }

  /// 构建商品基本信息区块
  Widget _buildGoodsBaseInfo(GoodsModel goods) {
    return Container(
      padding: EdgeInsets.all(8),
      color: Colors.white,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          //大标题
          Text(goods.title,
              style: TextStyle(
                  color: Colors.grey[800], overflow: TextOverflow.clip)),
          //副标题
          SizedBox(height: 4),
          Text(goods.subTitle,
              style: TextStyle(fontSize: 12, color: Colors.grey[700])),
          SizedBox(height: 4),
          //tag
          Row(
            children: [
              ...?goods.salesTag?.map(
                (e) => Container(
                  padding: EdgeInsets.all(2),
                  margin: EdgeInsets.all(2),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(2),
                    color: Colors.grey[50],
                    border: Border.all(color: Colors.redAccent, width: 0.2),
                  ),
                  child: Text(
                    e,
                    style: TextStyle(fontSize: 12, color: Colors.redAccent),
                  ),
                ),
              ),
            ],
          ),
          SizedBox(height: 8),
          //价格
          Row(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Text('￥',
                  style: TextStyle(fontSize: 12, color: Colors.redAccent)),
              Text(goods.price.toString(),
                  style: TextStyle(fontSize: 18, color: Colors.redAccent)),
              SizedBox(width: 4),
              Text(goods.originPrice.toString(),
                  style: TextStyle(fontSize: 12, color: Colors.grey)),
            ],
          ),
          SizedBox(height: 4),
          //统计数据
          Row(
            children: [
              Text('回头客${goods.repeatCustomer}+',
                  style: TextStyle(fontSize: 12, color: Colors.redAccent)),
              SizedBox(width: 8),
              Icon(
                Icons.star,
                size: 12,
                color: Colors.redAccent,
              ),
              Text('${goods.score}',
                  style: TextStyle(fontSize: 12, color: Colors.grey)),
              SizedBox(width: 6),
              Text('${goods.evaluate}+评论',
                  style: TextStyle(fontSize: 12, color: Colors.grey)),
              SizedBox(width: 8),
              Text('${goods.favourable}%好评',
                  style: TextStyle(fontSize: 12, color: Colors.grey))
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildBottomRow() {
    return Container(
      height: 62,
      padding: EdgeInsets.symmetric(horizontal: 2, vertical: 6),
      decoration: BoxDecoration(
        border: Border(top: BorderSide(color: Colors.grey, width: .3)),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Column(
            children: [
              Icon(Icons.home_outlined, size: 20),
              SizedBox(height: 2),
              Text('首页',
                  style: TextStyle(fontSize: 12, color: Colors.grey[700])),
            ],
          ),
          Column(
            children: [
              Icon(Icons.headset_mic_outlined, size: 20),
              SizedBox(height: 2),
              Text('客服',
                  style: TextStyle(fontSize: 12, color: Colors.grey[700])),
            ],
          ),
          Column(
            children: [
              Icon(Icons.favorite_border, size: 20),
              SizedBox(height: 2),
              Text('收藏',
                  style: TextStyle(fontSize: 12, color: Colors.grey[700])),
            ],
          ),
          ElevatedButton(
            onPressed: () {},
            child: Text('加入购物车', style: TextStyle(fontWeight: FontWeight.bold)),
            style: ButtonStyle(
              backgroundColor: MaterialStatePropertyAll(Color(0xFFcc9756)),
              padding: MaterialStatePropertyAll(
                  EdgeInsets.symmetric(vertical: 10, horizontal: 16)),
              elevation: MaterialStatePropertyAll(0),
              // fixedSize: MaterialStatePropertyAll(Size(122, 36)),
              shape: MaterialStatePropertyAll(RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(16)))),
            ),
          ),
          ElevatedButton(
            onPressed: () {},
            child: Text('立即购买', style: TextStyle(fontWeight: FontWeight.bold)),
            style: ButtonStyle(
              backgroundColor: MaterialStatePropertyAll(Color(0xFFdd1922)),
              padding: MaterialStatePropertyAll(
                  EdgeInsets.symmetric(vertical: 10, horizontal: 16)),
              elevation: MaterialStatePropertyAll(0),
              // fixedSize: MaterialStatePropertyAll(Size(108, 36)),
              shape: MaterialStatePropertyAll(RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(16)))),
            ),
          ),
        ],
      ),
    );
  }

  /// 构建浮动按钮-分享
  Widget _buildShareButton() {
    return Positioned(
      bottom: 200,
      right: 10,
      child: Container(
        width: 40,
        height: 40,
        padding: EdgeInsets.all(4),
        decoration: BoxDecoration(
          color: Color(0xFF666666),
          borderRadius: BorderRadius.circular(20),
        ),
        child: InkWell(
          onTap: () {},
          child: Column(
            children: [
              Icon(Icons.share_outlined, size: 14, color: Colors.white70),
              SizedBox(height: 2),
              Text('分享', style: TextStyle(fontSize: 10, color: Colors.white70))
            ],
          ),
        ),
      ),
    );
  }

  /// 构建浮动按钮-回到顶部
  Widget _buildBackTopButton() {
    return Positioned(
      bottom: 150,
      right: 10,
      child: Obx(
        () => Offstage(
          offstage: controller.hideBackToTop.value,
          child: Container(
            width: 40,
            height: 40,
            padding: EdgeInsets.all(4),
            decoration: BoxDecoration(
              color: Color(0xFF666666),
              borderRadius: BorderRadius.circular(20),
            ),
            child: InkWell(
              onTap: () => controller.backToTop(),
              child: Icon(Icons.keyboard_arrow_up_outlined,
                  size: 26, color: Colors.white70),
            ),
          ),
        ),
      ),
    );
  }
}
